<template>
  <basic-layout>
    <!-- 标题组件 -->
    <page-header />

    <view class="zhanwei"></view>
    <view class="body">
      <view class="body_l">
        <view class="body_l_top">
          <div class="year">{{ year }}</div>
          <div class="tame_text">年</div>
          <div class="mon">{{ month }}</div>
          <div class="tame_text">月</div>
          <div class="day">{{ day }}</div>
          <div class="tame_text">日</div>
          <div class="week">{{ week }}</div>
        </view>
        <view class="body_l_bottom">
          <view class="body_l_bottom_timer">
            <div class="h">{{ hour }}</div>
            <div class="time_dian">
              <div class="dian"></div>
              <div class="dian"></div>
            </div>
            <div class="m">{{ minute }}</div>
            <div class="time_dian">
              <div class="dian"></div>
              <div class="dian"></div>
            </div>
            <div class="s">{{ second }}</div>
          </view>
          <view class="body_l_bottom_tianqi">
            <div class="qing">{{ weatherList.weather }}</div>
            <div class="wendu">{{ weatherList.temperature }}℃</div>
          </view>
          <view class="body_l_bottom_wind">
            <div class="wind_row">
              <div class="wind_flex">城市：{{ weatherList.province }}</div>
              <div class="wind_flex">空气湿度：{{ weatherList.humidity }} ％</div>
            </div>
            <div class="wind_row">
              <div class="wind_flex">风向：{{ weatherList.winddirection }}</div>
              <div class="wind_flex">风力：{{ weatherList.windpower }} 级</div>
            </div>
          </view>
          <view class="body_l_bottom_run">
            <u-swiper class="swiper" :list="bannerList_l" indicator indicatorMode="dot" circular :loading="loading"
              :interval="4000" indicatorActiveColor="#30FEF4" indicatorInactiveColor="#8286A1" radius="20"
              @click="handleClickBanner($event, 'left')" />
          </view>
        </view>
      </view>

      <view class="body_r">
        <u-swiper :list="bannerList_r" indicator indicatorMode="dot" circular :loading="loading" radius="20" :interval="5000"
          indicatorActiveColor="#30FEF4" indicatorInactiveColor="#8286A1" @click="handleClickBanner($event, 'right')" />
      </view>
    </view>
  </basic-layout>
</template>

<script>
import BasicLayout from '@/components/layout/basic-layout.vue'
import { getWeatherReport, getBannerByType } from "@/api/index"
import config from '@/config.js'
import { baseUrl } from '../config'

export default {
  name: 'index',
  components: {
    BasicLayout
  },
  data() { 
    return {
      selected: 0,
      weatherList: {}, //天气列表
      year: '',
      month: '',
      day: '',
      hour: '',
      minute: '',
      second: '',
      week: '',
      timer: null,
      tabId: '', // 用于存储选中的tab id
      bannerList_r: [],
      bannerList_l: [],

      loading: false, // 轮播图加载状态
    }
  },

  mounted() {
    this.getWeather(); // 获取天气数据
    this.updateTime(); // 初始化时间
    this.timer = setInterval(this.updateTime, 1000); // 每秒更新时间

    // 监听tab选中事件
    uni.$on('tabSelected', this.onTabSelected);

    uni.hideTabBar() // 隐藏tabBar (解决底部白边问题)

    this.getBanner()
    this.baseUrl = config.baseUrl
  },

  beforeDestroy() {
    // 移除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
    // 移除事件监听
    uni.$off('tabSelected', this.onTabSelected);
  },

  methods: {
    // 获取banner数据 type: 1 左侧banner, 2 右侧banner
    getBanner() {
      this.loading = true;
      getBannerByType().then(res => {
        this.loading = false;
        // console.log(res);

        if (res.length > 0) {
          this.bannerList_r = res.filter(e => e.type == 2).map(e => ({
            url: this.baseUrl + e.images,
            trunLink: e.trunLink
          }));

          this.bannerList_l = res.filter(e => e.type == 1).map(e => ({
            url: this.baseUrl + e.images,
            trunLink: e.trunLink
          }));
        }
      });

    },

    // 轮播图点击跳转链接
    handleClickBanner(index, position) {
      const bannerList = position === 'left' ? this.bannerList_l : this.bannerList_r;
      const currentBanner = bannerList[index];

      if (!currentBanner?.trunLink) return;

      const path = currentBanner.trunLink;

      if (path.startsWith('http')) {
        uni.navigateTo({
          url: `/pages/common/webview/index?url=${encodeURIComponent(path)}`
        });
        return;
      }

      uni.switchTab({
        url: path,
        success: () => {
          // 直接触发事件，不需要获取当前页面信息
          uni.$emit('tabChange', { path });
        },
        fail: () => {
          uni.navigateTo({
            url: path
          });
        }
      });
    },

    // 获取天气数据
    getWeather() {
      getWeatherReport().then(res => {
        console.log("获取天气", res);
        this.weatherList = res.data
      })
    },

    // 更新时间
    updateTime() {
      const now = new Date();
      this.year = now.getFullYear();
      this.month = String(now.getMonth() + 1).padStart(2, '0');
      this.day = String(now.getDate()).padStart(2, '0');
      this.hour = String(now.getHours()).padStart(2, '0');
      this.minute = String(now.getMinutes()).padStart(2, '0');
      this.second = String(now.getSeconds()).padStart(2, '0');
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      this.week = weeks[now.getDay()];
    },

    // 处理tab选中事件
    onTabSelected(data) {
      // console.log('首页收到tab选中事件:', data);
      // console.log('选中的tab id:', data.id);

      // 这里可以根据id做相应的业务处理
      // 例如：根据不同的tab id加载不同的数据
      if (data.id) {
        // console.log('处理tab id:', data.id);
        this.tabId = data.id; // 存储选中的tab id
      }
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ .body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: calc(100vw * 24 / 2560);
  padding: 0 calc(100vw * 20 / 2560);
  box-sizing: border-box;
  /* background-color: skyblue; */

  .body_l {
    color: #fff;

    .body_l_top {
      width: calc(100vw * 720 / 2560);
      height: calc(100vw * 120 / 2560);
      border-radius: calc(100vw * 20 / 2560);
      background: linear-gradient(180deg, #3670FF 0%, #1022D5 100%);
      box-shadow: 0 0 8rpx rgba(250, 250, 250, 0.7);
      padding: calc(100vw * 21 / 2560) calc(100vw * 20 / 2560);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tame_text {
        font-size: calc(100vw * 40 / 2560);
      }

      .year,
      .mon,
      .day,
      .week {
        background: #0F2179;
        box-shadow: inset 0px 0px calc(100vw * 20 / 2560) 1px rgba(28, 0, 7, 0.5);
        border-radius: calc(100vw * 12 / 2560);
        font-size: calc(100vw * 48 / 2560);
        line-height: calc(100vw * 78 / 2560);
        text-align: center;
      }

      .year {
        width: calc(100vw * 168 / 2560);
        height: calc(100vw * 78 / 2560);
      }

      .mon,
      .day {
        width: calc(100vw * 78 / 2560);
        height: calc(100vw * 78 / 2560);
      }

      .week {
        width: calc(100vw * 170 / 2560);
        height: calc(100vw * 78 / 2560);
      }
    }

    .body_l_bottom {
      border-radius: calc(100vw * 20 / 2560);
      // background-color: rgba(28, 28, 130, 0.8);
      width: calc(100vw * 720 / 2560);
      height: calc(100vw * 972 / 2560);
      background: url('@/static/images/index/bg@2x.png') no-repeat center center;
      background-position: 100% 100%;
      background-size: cover;
      margin-top: calc(100vw * 24 / 2560);
      padding: calc(100vw * 40 / 2560);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: calc(100vw * 40 / 2560);

      .body_l_bottom_timer {
        width: 100%;
        height: calc(100vw * 180 / 2560);
        // background-color: #000;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .time_dian {
          width: calc(100vw * 20 / 2560);
          height: calc(100vw * 180 / 2560);
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;

          .dian {
            width: calc(100vw * 16 / 2560);
            height: calc(100vw * 16 / 2560);
            background-color: #346BFC;
            border-radius: calc(100vw * 5 / 2560);
          }
        }

        .h,
        .m,
        .s {
          width: calc(100vw * 180 / 2560);
          height: calc(100vw * 180 / 2560);
          background: linear-gradient(180deg, #3670FF 0%, #1022D5 100%);
          border-radius: calc(100vw * 24 / 2560);
          color: #fff;
          font-size: calc(100vw * 120 / 2560);
          line-height: calc(100vw * 180 / 2560);
          text-align: center;

          // 时分秒盒子半遮挡遮罩
          position: relative;

          &::after {
            content: "";
            width: calc(100vw * 180 / 2560);
            height: calc(100vw * 90 / 2560);
            position: absolute;
            left: 0;
            bottom: 0;
            background: linear-gradient(180deg, #060D50 0%, rgba(6, 13, 80, 0.2) 100%);
            border-radius: 0px 0px 24px 24px;
            opacity: 0.2;
            pointer-events: none;
            z-index: 1;
          }
        }


      }

      .body_l_bottom_tianqi {
        width: 100%;
        height: calc(100vw * 140 / 2560);
        // background-color: #000;
        padding: 0 calc(100vw * 20 / 2560);
        box-sizing: border-box;
        color: #fff;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        font-size: calc(100vw * 68 / 2560);

      }

      .body_l_bottom_wind {
        width: 100%;
        height: calc(100vw * 140 / 2560);
        // background-color: #000;
        padding: 0 40rpx;
        box-sizing: border-box;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: calc(100vw * 20 / 2560);

        .wind_row {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .wind_flex {
          flex: 1;
          font-size: calc(100vw * 32 / 2560);

          &:first-child {
            margin-right: calc(100vw * 20 / 2560);
          }
        }
      }

      .body_l_bottom_run {
        width: calc(100vw * 640 / 2560);
        height: calc(100vw * 360 / 2560);
        // background-color: #2037A0;
        // border-radius: calc(100vw * 20 / 2560);
        // box-shadow: 0 0 10rpx rgba(140, 93, 223, 0.7);

        .u-swiper {
          height: calc(100vw * 360 / 2560) !important;
          background-color: transparent !important;

          .u-swiper__wrapper {
            height: calc(100vw * 360 / 2560) !important;

            .u-swiper__wrapper__item__wrapper__image {
              height: calc(100vw * 360 / 2560) !important;
            }
          }
        }
      }
    }
  }

  .body_r {
    width: calc(100vw * 1780 / 2560);
    height: calc(100vw * 1112 / 2560);
    // border-radius: 20rpx;
    // background: url('@/static/images/index/bg_right@2x.png') no-repeat center center;
    background-position: 100% 100%;
    background-size: cover;

    .u-swiper {
      height: calc(100vw * 1112 / 2560) !important;
      background-color: transparent !important;

      .u-swiper__wrapper {
        height: calc(100vw * 1112 / 2560) !important;

        .u-swiper__wrapper__item__wrapper__image {
          height: calc(100vw * 1112 / 2560) !important;
        }
      }
    }
  }
}
</style>
